<template>
  <div class="content-view">
    <div class="table-head-tool ">
      <Button type="primary" @click="showAddWarp">新增</Button>

      <Form ref="formInline" :model="gridOption.param.seachOption" inline :label-width="80">
        <FormItem :label-width="20" class="flex">
          <Select v-model="gridOption.param.seachOption.key" style="width:120px" :placeholder="seachTypePlaceholder">
            <Option v-for="item in seachTypes" :value="item.key" :key="item.key">{{ item.value }}</Option>
          </Select>
          <Input class="ml10" v-model="gridOption.param.seachOption.value" style="width:200px;" search placeholder="请输入关键字" @on-search="query(1)" />
        </FormItem>

        <FormItem>
          <Button type="default" @click="exportCsv">导出</Button>
        </FormItem>
      </Form>
    </div>
    <div class="table-body">
      <tables :columns="listColumns" :value="gridOption.data" :pageOption="gridOption.param.pageOption" @changePage="query"></tables>
    </div>
    <editModal ref="editModal" :columns="editColumns" :rules="gridOption.rules">

    </editModal>
  </div>
</template>
<script>
import funTool from '@/libs/funTool'
import uiTool from '@/libs/uiTool'
import modelServer from '@/api/system_high/modelServer.js'
import listServer from '@/api/product/list_server.js'

export default {
  data() {
    let rules = {}
    
    rules["title"]=[{ required: true, message: '请填写标题'}]; 
    rules["content"]=[{ required: true, message: '请填写内容'}]; 
    rules["sort"]=[{ required: true,type:"number", message: '请选择排序', trigger: 'change' }]; 
    rules["release_date"]=[{ required: true, message: '请填写发布时间'}]; 
    rules["is_publish"]=[{ required: true,type:"number", message: '请选择是否发布', trigger: 'change' }]; 
    
    rules["type_id"]=[{ required: true, message: '请选择产品类别', trigger: 'change', }] 
    
    rules["list_pic"]=[{ required: true, message: '请上传列表图片', trigger: 'change' }]     
    return {
      seachTypes:[
          {key:"title",value:"标题"}, {key:"content",value:"内容"}, {key:"sort",value:"排序"}, {key:"release_date",value:"发布时间"}, {key:"is_publish",value:"是否发布"}, {key:"type_id",value:"产品类别"}, {key:"list_pic",value:"列表图片"},
      ],
      gridOption: {
        param: {
          seachOption:{key:"",value:""},
          pageOption:{ 
            total: 0,
            page: 1,
            pageSize: 20
           }
        },
        rules,
        columns:[
          {key:'id',title:'id',width:'80px',is_show_edit:0},
          
          { key: "title",title:"标题",disabled:  false,is_show_edit:1,is_show_list:1,  com:"Input" },
          { key: "content",title:"内容",disabled:  false,is_show_edit:1,is_show_list:0,  com:"Editor" },
          { key: "sort",title:"排序",disabled:  false,is_show_edit:1,is_show_list:1, data_type:"number", com:"InputNumber" },
          { key: "release_date",title:"发布时间",disabled:  false,is_show_edit:1,is_show_list:1,  com:"DatePicker" },
          { key: "is_publish",title:"是否发布",
          com:"Radio",
          source:[{key:0,value:"否"}, {key:1,value:"是"}, ] ,render:(h,params)=>{ 
              let row=params.column.source.find(p=>(p.key)==params.row['is_publish'] )
              if(row){ return <span>{row.value}</span>}else { return <span>-</span> }
            },
          disabled:  false,
          is_show_edit:1,
          is_show_list:1,
          defaultVal:'0',
          },
         
          { key: "type_id",title:"产品类别",
          com:"Select",
          source:[] ,render:(h,params)=>{ 
              let row=params.column.source.find(p=>(p.key)==params.row['type_id'] )
              if(row){ return <span>{row.value}</span>}else { return <span>-</span> }
            },
          disabled:  false,
          is_show_edit:1,
          is_show_list:1,
          defaultVal:'',
          },
         
          { key: "list_pic",title:"列表图片",com:"UploadSingle",    disabled:  false,  is_show_edit:1,is_show_list:0,
          render:(h,params)=>{ return <img src={params.row['list_pic']} style={{ width: '100px', height: '100px' }} />} },
         
         {key:'created_date',title:'创建时间',width:'100px',is_show_edit:0 },
         {key:'updated_date',title:'更新时间',width:'100px',is_show_edit:0 },
         {
            title: '操作',
            key: 'action',
            width:'200px',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  },
                },
                {
                  title: '删除',
                  type: 'primary',
                  click: () => {
                    this.delConfirm(params.row)
                  },
                },
              ]

              return uiTool.getBtn(h, btns)
            },
          },],
        data: []
      },
    }
  },
  computed:{
    seachTypePlaceholder(){
      return  this.seachTypes.map(p=>p.value).slice(0,3).join('/')
    },
    editColumns(){
       let editTempColumns=  this.gridOption.columns.filter(p=>p.is_show_edit===1)
       return editTempColumns
    },
    listColumns(){
       let listTempColumns=  this.gridOption.columns.filter(p=>p.is_show_list!==0)
       return listTempColumns
    }
  },

  mounted() {
    this.init()
    this.initCol()
  },
  methods: {
    init() {
      this.query(1)
    },
   async initCol(){
     
        let columnRows=[       {key:'type_id',modelKey:"pro_type",map_option:{key:"id",value:"name"}}, ]
        let columnKeys=columnRows.map(p=>p.key)
        let newColumns=this.gridOption.columns.filter(p=>columnKeys.indexOf(p.key) >-1)
          for(let i=0;i<newColumns.length;i++){
            let curColumn =newColumns[i]
            let modelMap=columnRows[i].map_option
            let res=await modelServer.interface({model_key:columnRows[i].modelKey,map_option:modelMap})
            curColumn.source=res.data
          }
     
    },

     async inquiry() {
      let res = await listServer.all(this.gridOption.param)
      this.gridOption.data = res.data
    },

    async query(page){
      if (page) {
        this.gridOption.param.pageOption.page = page
      }

      let res = await listServer.page(this.gridOption.param)
       this.gridOption.data = res.data.rows
      this.gridOption.param.pageOption.total = res.data.count

    },
    async showAddWarp() {
      this.$refs.editModal.addShow({'is_publish':'0', }, async (newRow) => {
        let res = await listServer.add(newRow)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
   async showEditWarp(row) {
      this.$refs.editModal.editShow(row, async (newRow) => {
        let valid = await this.$refs['editModal'].$refs['From'].validate()
        if (valid) {
          let res = await listServer.edit(newRow)
          rootVue.$Message.success('修改成功！')
          this.init()
        }
      })
    },
   
   async delConfirm(row){
      uiTool.delConfirm(async () => {
              await listServer.del(row)
              rootVue.$Message.success('删除成功！')
              this.init()
      })
    },

   async exportCsv(row){
      await listServer.exportCsv(row)
    }
  },
}
</script>

<style lang="less"></style>